<!--
 *@description:Row Template
 *@author: Ming
 *@date: 2021-05-06 16:22:04
 *@version: V1.0.5
-->
<template>
  <div :class="['row',...rowClass]" :style="rowStyle">
      <slot></slot>
  </div>
</template>

<script>
export default {
  name:'LmRow',
  props: {
      gutter:{
          type:[Number,String]
      },
      justify:{
          type:String,
           validator(value) {
            let arr = [
                'left',
                'center',
                'right',
                'space-between',
                'space-around'
            ]
            return arr.includes(value)
        }
      }
  },
  mounted() {
    //  如果有col 子元素 而且有gutter 将 gutter 传给 子元素
    let {$children , gutter}  = this
    if($children && gutter){
        $children.forEach(vm=>{
            vm.gutter = gutter
        })
    }
  },
  computed: {
      rowStyle(){
          let gutter = `${-this.gutter/2}px`
          return {
              marginLeft: gutter,
              marginRight: gutter
          }
      },
      rowClass(){
          let {justify} = this
          return [ justify && `justify-${justify}`]
      }
  }
};
</script>

<style lang="scss" scoped>
.row {
    display: flex;
    flex-wrap: wrap;
    &.justify-left{
        justify-content: flex-start
    }
    &.justify-center{
        justify-content: center;
    }
    &.justify-right{
        justify-content: flex-end;
    }
    &.justify-space-between{
        justify-content: space-between;
    }
    &.justify-space-around{
        justify-content: space-around;
    }
}
</style>
